<template>
    <div class="storage-container">
        <el-card>
            <template #header>
                <div class="card-header">
                    <div>
                        <el-input v-model="searchKeyword" placeholder="搜索库位编码" size="small"
                            style="width: 180px; margin-right: 10px" @input="filterTable" />
                        <el-select v-model="filterType" placeholder="筛选库位类型" size="small" clearable
                            style="width: 160px; margin-right: 10px" @change="filterTable">
                            <el-option v-for="item in uniqueTypes" :key="item" :label="item" :value="item" />
                        </el-select>
                        <el-button type="primary" icon="Plus" @click="openDialog">新增储位</el-button>
                        <el-button icon="Download" @click="exportTable">导出</el-button>
                    </div>
                </div>
            </template>

            <el-table :data="filteredData" border style="width: 100%">
                <el-table-column prop="code" label="库位编码" />
                <el-table-column prop="type" label="库位类型" />
                <el-table-column prop="zone" label="所属区域" />
                <el-table-column prop="group" label="所属组别" />
                <el-table-column prop="status" label="使用状态" />
                <el-table-column prop="maxWeight" label="最大重量(kg)" />
                <el-table-column prop="maxVolume" label="最大体积(m³)" />
                <el-table-column prop="height" label="高(cm)" />
                <el-table-column prop="width" label="宽(cm)" />
                <el-table-column prop="depth" label="深(cm)" />
                <el-table-column label="操作" width="140">
                    <template #default="scope">
                        <el-button size="small" @click="editRow(scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="deleteRow(scope.row.code)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog v-model="dialogVisible" title="储位信息" width="500px">
            <el-form :model="form" label-width="100px">
                <el-form-item label="库位编码">
                    <el-input v-model="form.code" />
                </el-form-item>
                <el-form-item label="库位类型">
                    <el-select v-model="form.type" placeholder="请选择">
                        <el-option label="标准库位" value="标准库位" />
                        <el-option label="冷藏库位" value="冷藏库位" />
                        <el-option label="重载库位" value="重载库位" />
                    </el-select>
                </el-form-item>
                <el-form-item label="所属区域">
                    <el-input v-model="form.zone" />
                </el-form-item>
                <el-form-item label="所属组别">
                    <el-input v-model="form.group" />
                </el-form-item>
                <el-form-item label="最大重量">
                    <el-input v-model="form.maxWeight" type="number" />
                </el-form-item>
                <el-form-item label="最大体积">
                    <el-input v-model="form.maxVolume" type="number" />
                </el-form-item>
                <el-form-item label="高(cm)">
                    <el-input v-model="form.height" type="number" />
                </el-form-item>
                <el-form-item label="宽(cm)">
                    <el-input v-model="form.width" type="number" />
                </el-form-item>
                <el-form-item label="深(cm)">
                    <el-input v-model="form.depth" type="number" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveForm">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import mockData from '@/common/assets/mock-storage-data.json'

const searchKeyword = ref('')
const filterType = ref('')
const rawData = ref(mockData)
const filteredData = ref([...rawData.value])
const dialogVisible = ref(false)

const form = ref({
    code: '',
    type: '',
    zone: '',
    group: '',
    status: '空闲',
    maxWeight: 0,
    maxVolume: 0,
    height: 0,
    width: 0,
    depth: 0
})

const uniqueTypes = computed(() =>
    Array.from(new Set(rawData.value.map(item => item.type)))
)

function openDialog() {
    Object.assign(form.value, {
        code: '',
        type: '',
        zone: '',
        group: '',
        status: '空闲',
        maxWeight: 0,
        maxVolume: 0,
        height: 0,
        width: 0,
        depth: 0
    })
    dialogVisible.value = true
}

function editRow(row: any) {
    form.value = { ...row }
    dialogVisible.value = true
}

function saveForm() {
    const index = rawData.value.findIndex(item => item.code === form.value.code)
    if (index > -1) {
        rawData.value[index] = { ...form.value }
    } else {
        rawData.value.push({ ...form.value })
    }
    filterTable()
    dialogVisible.value = false
}

function deleteRow(code: string) {
    rawData.value = rawData.value.filter(item => item.code !== code)
    filterTable()
}

function filterTable() {
    filteredData.value = rawData.value.filter(item => {
        const matchKeyword = item.code.toLowerCase().includes(searchKeyword.value.toLowerCase())
        const matchType = filterType.value ? item.type === filterType.value : true
        return matchKeyword && matchType
    })
}

function exportTable() {
    const rows = filteredData.value
    const headers = Object.keys(rows[0]) as Array<keyof typeof rows[0]>
    const csv = [
        headers.join(','),
        ...rows.map(row => headers.map(field => row[field] as string | number).join(','))
    ].join('\n')

    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = '储位数据.csv'
    link.click()
}
</script>

<style scoped>
.storage-container {
    padding: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>